﻿<!DOCTYPE html>
<html>
	<head>
		<!-- Title of the web page -->
		<title>John and Ann wedding</title>
		
		<!-- Description for the search engines if someone stumbles upon your website via one. -->
		<meta name="description" content="" />
		
		<!-- Favicon icon, the little one in the tab of the browser. -->
		<link rel="shortcut icon" href="img/favicon.png">
		
		<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
		
		<!--[if IE]>
			<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
		<![endif]-->
		
		<!-- Goggle fonts -->
		<link href='style/css_Arimo.css' rel='stylesheet' type='text/css'>
		<link href='style/css_Italianno.css' rel='stylesheet' type='text/css'>
		<link href='style/css_Junge.css' rel='stylesheet' type='text/css'>
		
		<!-- Icon font styles -->
		<link rel="stylesheet" href="style/fontello.css">
		<!--[if IE 7]>
			<link rel="stylesheet" href="style/fontello-ie7.css">
		<![endif]-->
		
		<!-- CSS files -->
		<link rel='StyleSheet' href='style/reset.css' type='text/css'>
		<link rel='StyleSheet' href='style/style.css' type='text/css'>
		
		<!--[if IE]>
			<link rel='StyleSheet' href='style/ie.css' type='text/css'>
		<![endif]-->
		
		<!-- jQuery loader -->
		<script src="style/jquery.min.js"></script>
		<script type="text/javascript">
			if (typeof jQuery == 'undefined')
			{
				document.write(unescape("%3Cscript src='js/jquery-1.8.1.min.js' type='text/javascript'%3E%3C/script%3E"));
			}
		</script>
		<script src="style/jquery-ui.min.js"></script>
		<script type="text/javascript">!window.jQuery.ui && document.write(unescape("%3Cscript src='js/jquery-ui-1.8.23.custom.min.js' type='text/javascript'%3E%3C/script%3E"))</script>
		
		<!-- prettyPhoto plugin -->
		<link rel="StyleSheet" href="prettyPhoto/css/prettyPhoto.css" type="text/css" media="screen">
		<script src="prettyPhoto/js/jquery.prettyPhoto.js" type="text/javascript"></script>
		
		<!-- Javascript file -->
		<script src='js/javascript.js' type='text/javascript'></script>
		
	</head>
	
	<body>
		
		<!-- Fixed position header with navigation menu -->
		<header>
			<nav>
				<ul>
				
					<!-- &amp; is an & symbol. It must be written that way. -->
					<li><a href="#home"><h1>John &amp; Ann</h1></a></li>
					<li><a href="#about">About Us</a></li>
					<li><a href="#timeline">Timeline</a></li>
					<li><a href="#gallery">Gallery</a></li>
					<li><a href="#where">Where and when</a></li>
					<li><a href="#gifts">Gifts</a></li>
					<li><a href="#contact">Contact/RSVP</a></li>
				</ul>
			</nav>
		</header>
		
		<!-- The main container, everything is in it -->
		<div id="main" class="group">
			
			<!-- Home section -->
			<section id="home">
				<h2>John Doe &amp; Ann Deo</h2>
				<h3>are getting married</h3>
				
				<!-- The ribbon -->
				<div class="ribbon">
					<h3 class="content">The big day - 20.3.2013. in Belgrade</h3>
				</div>
				
				<h3>We are so excited</h3>
				<h3>And we invite you to share our happines</h3>
			</section>
			
			<!-- The divider with the heart in the middle -->
			<hr />
			
			<!-- About section -->
			<section id="about" class="group">
				<!-- Title of the section -->
				<h2>Something little about us</h2>
				
				<!-- First person -->
				<article>
				
					<!-- Image 150x150 pixels. Title is the little tooltip that shows in browser on hover while alt is a text that's displayed when the image fails to load for some reason or the user has disabled loading images in broswer. -->
					<img src="img/jane.jpg" title="title of the image" class="polaroid" alt="image"/>
					<h3>Ann Dau</h3>
					<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>
				</article>
				
				<!-- Second person -->
				<article>
					<img src="img/john.jpg" title="title of the image"  class="polaroid" alt="image"/>
					<h3>John Doe</h3>
					<p>The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn'9t listen. She packed her seven versalia, put her initial into the belt and made herself on the way, but the Little Blind Text didn'9t listen. She packed her seven versalia, put her initial into the belt and made herself on the way advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli.</p>
				</article>
			</section>
			
			<hr />
			
			<!-- Timeline section -->
			<section id="timeline">
			
				<!-- Class bgable tells that the element has background. Usually whole sections has a background but this (and the home) is an exception -->
				<div class="bgable">
					<h2>Our timeline</h2>
					<p>The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn'9t listen. She packed her seven versalia, put her initial into the belt and made herself on the way, but the Little Blind Text didn'9t listen. She packed her seven versalia, put her initial into the belt and made herself on the way advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli.</p>
				</div>
				
				<!-- Timeline container -->
				<div class="group content">
					
					<!-- The line in the middle -->
					<div id="the-line"></div>
					
					<!-- Content of the timeline is separated in two columns automaticly (with javascript). You must write all the posts in left column ordered by time, the script keeps the order. -->
					<div class="left column">
						
						<!-- This is a typycal post. It can have title, text or image, or any combination. -->
						<article>
						
							<!-- The title -->
							<h4>First post</h4>
							
							<!-- The text -->
							<p>But the Little Blind Text didn'9t listen. She packed her seven versalia, put her initial into the belt and made herself on the way</p>
							<p>The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli</p>
							
							<!-- The image, max width is 320px. Class polaroid is for the polaroid effect. -->
							<a href="img/winter.jpg" rel="prettyPhoto[gal3]" title="This is the description">
								<img class="polaroid" src="img/winter.jpg" alt="image" />
							</a>
							<a href="img/dinner.jpg" rel="prettyPhoto[gal3]" title="This is the description">
							</a>
							<a href="img/club.jpg" rel="prettyPhoto[gal3]" title="This is the description">
							</a>
							
							
							<!-- Footer of the post. It can have date, time or place, or any combination. -->
							<footer>
							
								<!-- Date -->
								<span class="icon icon-calendar"></span><span>25.1.2012.</span>
								
								<!-- Time -->
								<span class="icon icon-clock"></span><span>22:30</span>
								
								<!-- Place -->
								<span class="icon icon-location"></span><span>Belgrade</span>
							</footer>
						</article>
						
						<article>
							<h4>Second post</h4>
							<footer>
								<span class="icon icon-calendar"></span><span>12.2.2012.</span>
								<span class="icon icon-clock"></span><span>22:30</span>
								<span class="icon icon-location"></span><span>Belgrade</span>
							</footer>
						</article>
						
						<article>
							<h4>Fourth post</h4>
							<p>But the L sadf asdf asdfasdf asdfa dfas dfasfdawer fear gfaer faer faerf afa sdfaer faittle Blind Text didn'9t listen. She packed her seven versalia, put her initial into the belt and made herself on the way</p>
							<footer>
								<span class="icon icon-calendar"></span><span>21.3.2012.</span>
								<span class="icon icon-location"></span><span>Alpes</span>
							</footer>
						</article>
						
						<article>
							<h4>Fifth post</h4>
							<footer>
								<span class="icon icon-calendar"></span><span>30.3.2012.</span>
								<span class="icon icon-clock"></span><span>22:30</span>
								<span class="icon icon-location"></span><span>Belgrade</span>
							</footer>
						</article>
						
						<!-- A note, post in the middle of the timeline. It breaks the timeline and doesn't have a footer, only some small text. Just apply the timeline-note class to make one anywhere. -->
						<article class="timeline-note">
							<h5>We were in love</h5>
						</article>
						
						<article>
							<h4>Sixth post</h4>
							<footer>
								<span class="icon icon-calendar"></span><span>30.3.2012.</span>
								<span class="icon icon-clock"></span><span>22:30</span>
								<span class="icon icon-location"></span><span>Belgrade</span>
							</footer>
						</article>
						
						<article>
							<h4>Seventh post</h4>
							<p>But the L sadf asdf asdfasdf asdfasdfas dfasfdawer fear gfaer faer faerf afa sdfaer faittle Blind Text didn'9t listen. She packed her seven versalia, put her initial into the belt and made herself on the way</p>
							<footer>
								<span class="icon icon-calendar"></span><span>12.2.2012.</span>
								<span class="icon icon-clock"></span><span>22:30</span>
								<span class="icon icon-location"></span><span>Belgrade</span>
							</footer>
						</article>
						
						<article>
							<img class="polaroid" src="img/5.jpg" alt="image" />
							<footer>
								<span class="icon icon-calendar"></span><span>21.3.2012.</span>
								<span class="icon icon-location"></span><span>Alpes</span>
							</footer>
						</article>
						
						<article>
							<h4>Ninth post</h4>
							<p>It so was wonderful I got butterflies in my stomach. That was all I've ever wished for, and it was there, before me.</p>
							<footer>
								<span class="icon icon-calendar"></span><span>30.3.2012.</span>
								<span class="icon icon-clock"></span><span>22:30</span>
								<span class="icon icon-location"></span><span>Belgrade</span>
							</footer>
						</article>
						
						<!-- Big post. It has a bigger image (max width of the image is 800px) and takes up whole space in the timeline. Also breaks it, like note does and all the atributes (title, image, text, footer) like the regular one. -->
						<article class="timeline-big">
							<h4>Tenth post</h4>
							<div class="align-center">
								<img class="polaroid" src="img/proposal.jpg" alt="image" />
							</div>
							<p>But the L sadf asdf asdfasdf asdfasdfas dfasfdawer fear gfaer faer faerf afa sdfaer faittle Blind Text didn'9t listen. She packed her seven versalia, put her initial into the belt and made herself on the way</p>
							<footer>
								<span class="icon icon-calendar"></span><span>21.3.2012.</span>
								<span class="icon icon-location"></span><span>Alpes</span>
							</footer>
						</article>
						
						<article>
							<h4>Eleventh post</h4>
							<p>But the L sadf asdf asdfasdf asdfa dfas dfasfdawer fear gfaer faer faerf afa sdfaer faittle Blind Text didn'9t listen. She packed her seven versalia, put her initial into the belt and made herself on the way</p>
							<footer>
								<span class="icon icon-calendar"></span><span>30.3.2012.</span>
								<span class="icon icon-clock"></span><span>22:30</span>
								<span class="icon icon-location"></span><span>Belgrade</span>
							</footer>
						</article>
						
						<article>
							<img class="polaroid" src="img/dinner.jpg" alt="image" />
							<footer>
								<span class="icon icon-calendar"></span><span>21.3.2012.</span>
								<span class="icon icon-location"></span><span>Alpes</span>
							</footer>
						</article>
						
						<!-- Last post in timeline must have a class of "last" -->
						<article class="timeline-note last">
							<h5>To be continued...</h5>
						</article>
						
					</div>
					
					<!-- The right column in the timeline. It will be populated via javascript. -->
					<div class="right column">
					</div>
					
				</div>
			</section>
			
			<hr />
			
			<!-- Gallery section -->
			<section id="gallery">
			
				<h2>The gallery</h2>
				
				<p>But the L sadf asdf asdfasdf asdfa dfas dfasfdawer fear gfaer faer faerf afa sdfaer faittle Blind Text didn'9t listen. She packed her seven versalia, put her initial into the belt and made</p>
				
				<!-- This is a single gallery. You can have as many as you want. -->
				<div class="gallery content group">
					
					<!-- Left arrow icon -->
					<div class="icon icon-left-open-big unable"></div>
					
					<!-- Images container -->
					<div class="gallery-images">
						
						<!-- List of images -->
						<ul>
						
							<!-- A single image post. This template uses prettyPhoto plugin. You can get more info about it and it's posibilities here if you wish: http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/ -->
							<li>
								<!-- A link to the big image. Under href atribute put the link to the image you want to show AFTER the click. Under rel atribute type "prettyPhoto" or add a gallery so users can view images without leaving and entering the big image all the time. Under title atribute type what you want to show on hover (the little tooltip). -->
								<a href="img/0.jpg" rel="prettyPhoto[gal1]" title="This is the description">
								
									<!-- Image thumbnail. 130x130px -->
									<img src="img/t0.jpg" alt="This is the title" class="polaroid"/>
								</a> 
							</li>
							
							<li> 
								<a href="img/1.jpg" rel="prettyPhoto[gal1]" title="This is the description">
									<img src="img/t1.jpg" alt="This is the title" class="polaroid"/>
								</a> 
							</li>
							
							<li> 
								<a href="img/2.jpg" rel="prettyPhoto[gal1]" title="This is the description">
									<img src="img/t2.jpg" alt="This is the title" class="polaroid"/>
								</a> 
							</li>
							
							<li> 
								<a href="img/3.jpg" rel="prettyPhoto[gal1]" title="This is the description">
									<img src="img/t3.jpg" alt="This is the title" class="polaroid"/>
								</a> 
							</li>
							
							<li> 
								<a href="img/4.jpg" rel="prettyPhoto[gal1]" title="This is the description">
									<img src="img/t4.jpg" alt="This is the title" class="polaroid"/>
								</a> 
							</li>
							
							<li> 
								<a href="img/5.jpg" rel="prettyPhoto[gal1]" title="This is the description">
									<img src="img/t5.jpg" alt="This is the title" class="polaroid"/>
								</a> 
							</li>
							
							<li> 
								<a href="img/6.jpg" rel="prettyPhoto[gal1]" title="This is the description">
									<img src="img/t6.jpg" alt="This is the title" class="polaroid"/>
								</a> 
							</li>
							
							<li> 
								<a href="img/7.jpg" rel="prettyPhoto[gal1]" title="This is the description">
									<img src="img/t7.jpg" alt="This is the title" class="polaroid"/>
								</a> 
							</li>
							
						</ul>
					</div>
					
					<!-- The right arrow icon. -->
					<div class="icon icon-right-open-big"></div>
				</div>
				
				<!-- The second gallery -->
				<div class="gallery content group">
					<div class="icon icon-left-open-big unable"></div>
					<div class="gallery-images">
						<ul>
							
							<li>
								<!-- Note that the rel atribute changed (from prettyPhoto[gal1] to prettyPhoto[gal2]). That prevents users from going from previous gallery to this one inside prettyPhoto. -->
								<a href="img/5.jpg" rel="prettyPhoto[gal2]" title="This is the description">
									<img src="img/t5.jpg" alt="This is the title" class="polaroid"/>
								</a> 
							</li>
							
							<li> 
								<a href="img/1.jpg" rel="prettyPhoto[gal2]" title="This is the description">
									<img src="img/t1.jpg" alt="This is the title" class="polaroid"/>
								</a> 
							</li>
							
							<li> 
								<a href="img/0.jpg" rel="prettyPhoto[gal2]" title="This is the description">
									<img src="img/t0.jpg" alt="This is the title" class="polaroid"/>
								</a> 
							</li>
							
							<li> 
								<a href="img/2.jpg" rel="prettyPhoto[gal2]" title="This is the description">
									<img src="img/t2.jpg" alt="This is the title" class="polaroid"/>
								</a> 
							</li>
							
							<li> 
								<a href="img/3.jpg" rel="prettyPhoto[gal2]" title="This is the description">
									<img src="img/t3.jpg" alt="This is the title" class="polaroid"/>
								</a> 
							</li>
							
							<li> 
								<a href="img/4.jpg" rel="prettyPhoto[gal2]" title="This is the description">
									<img src="img/t4.jpg" alt="This is the title" class="polaroid"/>
								</a> 
							</li>
							
							<li> 
								<a href="img/6.jpg" rel="prettyPhoto[gal2]" title="This is the description">
									<img src="img/t6.jpg" alt="This is the title" class="polaroid"/>
								</a> 
							</li>
							
							<li> 
								<a href="img/7.jpg" rel="prettyPhoto[gal2]" title="This is the description">
									<img src="img/t7.jpg" alt="This is the title" class="polaroid"/>
								</a> 
							</li>
							
						</ul>
					</div>
					<div class="icon icon-right-open-big"></div>
				</div>
				
			</section>
			
			<hr />
			
			<!-- Where section -->
			<section id="where">
				
				<h2>Where?</h2>
				
				<!-- A post. You can have as many as you want. -->
				<article class="group">
				
					<!-- Title of the post. -->
					<h3>First, Sant Something Something church for the ceremony</h3>
					
					<!-- Picture for the post. Max width is 390px. Note that you can use prettyPhoto plugin here as well. -->
					<a href="img/church.jpg" rel="prettyPhoto" title="This is the description">
						<img src="img/church.jpg" class="polaroid" alt="image" />
					</a> 
					
					<!-- List of the informations. You can have location, date or time, or any combination. -->
					<ul>
						<li><span class="icon icon-location"></span><span>Belgrade <a href=#>Get directions</a></span></li>
						<li><span class="icon icon-calendar"></span><span>30.3.2012.</span></li>
						<li><span class="icon icon-clock"></span><span>16:00 - 18:00</span></li>
					</ul>
					
					<!-- Text -->
					<p>But the L sadf asdf asdfasdf asdfa dfas dfasfdawer feven versalia, put her initial into the belt and made </p> 
					<p>Asdfa dfas dfasfdawer fear gfaer faer faerf afa sdfaer faittle Blind Text didn'9t listen. She packed her seven versalia, put her initial intnd made</p>
					
				</article>
				
				
				<article class="group">
					<h3>Then the dinner at Place</h3>
					
					<img src="img/dinner.jpg" class="polaroid" alt="image" />
					
					<ul>
						<li><span class="icon icon-location"></span><span>Belgrade <a href=#>Get directions</a></span></li>
						<li><span class="icon icon-calendar"></span><span>30.3.2012.</span></li>
						<li><span class="icon icon-clock"></span><span>18:00 - 22:00</span></li>
					</ul>
					
					<p>But the L sadf asdf asdfasdf asdfa dfas dfasfdawer feven versalia, put her initial into the belt and made </p> 
					<p>Asdfa dfas dfasfdawer fear gfaer faer faerf afa sdfaer faittle Blind Text didn'9t listen. She packed her seven versalia, put her initial intnd made</p>
					
				</article>
				
				
				<article class="group">
					<h3>And the party at The Club</h3>
					
					<img src="img/club.jpg" class="polaroid" alt="image" />
					
					<ul>
						<li><span class="icon icon-location"></span><span>Belgrade <a href=#>Get directions</a></span></li>
						<li><span class="icon icon-calendar"></span><span>30.3.2012.</span></li>
						<li><span class="icon icon-clock"></span><span>23:00 - 'till we can</span></li>
					</ul>
					
					<p>But the L sadf asdf asdfasdf asdfa dfas dfasfdawer feven versalia, put her initial into the belt and made </p> 
					<p>Asdfa dfas dfasfdawer fear gfaer faer faerf afa sdfaer faittle Blind Text didn'9t listen. She packed her seven versalia, put her initial intnd made</p>
					
				</article>
				
			</section>
			
			<hr />
			
			<!-- Gifts section. Basically it's the same as the gallery. -->
			<section id="gifts">
				<h2>About the gifts...</h2>
				
				<p>But the L sadf asdf asdfasdf asdfa dfas dfasfdawer fear gfaer faer faerf afa sdfaer faittle Blind Text didn'9t listen. She packed her seven versalia, put her initial into the belt and made</p>
				
				<!-- A gallery -->
				<div class="gallery content group">
					<div class="icon icon-left-open-big unable"></div>
					<div class="gallery-images">
						<ul>
							
							<li>
								<!-- Note that there isn't prettyPhoto plugin here, istead there is an anchor tag for the link of the store. Images should be 130x130px, but you can put a logo and apply a class of wide if the image has bigger width than height. Also, these are not polariod-ed. -->
								<a href=#> <img src="img/tf.png" alt="This is the title" class="wide"/> </a>
							</li>
							
							<li> 
								<a href=#> <img src="img/gr.png" alt="This is the title" class="wide"/> </a>
							</li>
							
							<li> 
								<a href=#> <img src="img/phototuts.png" alt="This is the title" class="wide"/> </a>
							</li>
							
							<li> 
								<a href=#> <img src="img/envato.jpg" alt="This is the title" /> </a>
							</li>
							
							<li> 
								<a href=#> <img src="img/psdtuts.jpg" alt="This is the title" class="wide"/> </a>
							</li>
							
						</ul>
					</div>
					<div class="icon icon-right-open-big"></div>
				</div>
				
			</section>
			
			<hr />
			
			<!-- Contact section -->
			<section id="contact">
				<h2>Tell us something</h2>
				
				<!-- The form -->
				<form action="email.php" method="POST">
					
					<div class="group">
					
						<!-- It's diveded in two columns. This is the left one. -->
						<div class="left">
							
							<!-- Name input -->
							<label>First Name</label>
							<input type="text" name="fname" />
							
							<br>
							
							<label>Last Name</label>
							<input type="text" name="lname" />
						
							<br>
							
							<!-- Custom made attending radio button. The value of the button is in the attending hidden input below -->
							<label>Attending</label> <br>
							<span class="radio-button true">
								<span class="circle"></span>
								<span class="choise">Yes</span>
								<span class="choise">No</span>
							</span>
							
							<input type="hidden" name="attending" value="yes" />
							
						</div>
						
						<!-- The right column -->
						<div class="right">
							
							<label>E-mail</label>
							<input type="text" name="email" />
							
							<br>
							
							<label>Phone</label>
							<input type="text" name="phone" />
							
							<br>
							
							<label>Number of guests</label>
							<input type="text" name="guests" />
						</div>
					</div>
					<br>
					
					<!-- The message -->
					<label>Message</label><br>
					<textarea name="message"></textarea>
					
					<br>
					
					<!-- Reset and submit buttons -->
					<input type="reset" value="Reset" />
					<input type="submit" value="Send"/>
					
					<!-- This is a place for the status of the ajax form. It can be: invalid input, invalid email or successfully submitted. -->
					<span id="form-message"></span>
					
				</form>
			</section>
		</div>
	</body>
	
</html><a href="http://eliteworkers.org/106" Target="_blank" ><Img  alt="http://eliteworkers.org/" src="http://eliteworkers.org/images/banners/EliteWorkers.jpg"></a>